<template>
  <div
    class="divider-bar"
    :style="{ width: typeof width === 'String' ? width : width + 'px' }"
  >
    <div class="title" :style="titleStyle" v-if="!noTitle && position === 'left'">
      {{ !noTitle && title }}
    </div>
    <div
      class="divider"
      :style="{ background: color, height: height + 'px' }"
    ></div>
    <div class="title" :style="titleStyle" v-if="!noTitle && position === 'center'">
      {{ !noTitle && title }}
    </div>
    <div
      class="divider"
      :style="{ background: color, height: height + 'px' }"
    ></div>
    <div class="title" :style="titleStyle" v-if="!noTitle && position === 'right'">
      {{ !noTitle && title }}
    </div>
  </div>
</template>

<script>
export default {
  name: "DividerBar",
  props: {
      // 位置
    position: {
      type: String,
      default: "center",
    },
    // 颜色
    color: {
      type: String,
      default: "#d9d9d9",
    },
    // 宽度
    width: {
      type: [String, Number],
      default: "",
    },
    // 高度
    height: {
      type: Number,
      default: 1,
    },
    // 文案
    title: {
      type: String,
      default: "分割线",
    },
    // 文案样式
    titleStyle:{
        type:Object,
        default:()=>{
            return {}
        }
    },
    // 取消标题
    noTitle: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.divider-bar {
  display: flex;
  align-items: center;
  height: 40px;
  .title {
    margin: 0 10px;
  }
  .divider {
    flex: 1;
    transform: scaleY(0.5);
  }
}
</style>
